<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-26 15:16:08
 * @LastEditTime: 2019-10-23 09:48:32
 * @LastEditors: Please set LastEditors
 -->
<template>
<div class="container">
 <HeadNav title="瀑布流组件"></HeadNav>

    <van-cell-group class="search_bar">
    <van-field
      v-model="xsname"
      center
      clearable
      label="小说"
      placeholder="请输入小说名字"
    >
      <van-button slot="button" size="small" type="primary" @click.native="getList">搜索</van-button>
    </van-field>
  </van-cell-group>

 
  <div class="content">
  <BScroll>
    <waterfall 
    :col='3'   
    :data="list"
    >
      <div v-for="(item,index) in list" class="item" :key="index">
       <!--  <img
         :lazy-src="item.cover" 
         alt="加载错误"  
        @error="defaultImgs($event)"
         /> -->
         <progressive-img 
         :src="item.cover"
         />
      </div>
    </waterfall>
  </BScroll>
    </div>
  </div>
</template>
<script>
import api from "@/api/index.js";
import { Toast } from 'vant';
export default {
  data(){
    return{
      list:[],
      xsname:'',
    }
  },
  created(){
    
  },
  methods:{
     getList(){
      Toast.loading({
        mask: true,
        message: '加载中...',
        duration:0,
      });
      api.getInfo({
        xsname:this.xsname
      }).then(res=>{
        Toast.clear();
        console.log('res',res);
        if(res.data.code == 0 ){
          this.list = res.data.list;
        }else{
          this.list = [];
        }
      }).catch(err=>{
        console.log('err',err);
        this.list = [];
        Toast.clear();
        Toast(err);
      })
    },
    defaultImgs(e){
      e.target.src = require("../assets/images/timg.jpg");
      e.target.style = "height:100px";
    }

  },
  
}
</script>
<style lang="less" scoped>
.search_bar{
  height: 100px;
  display: flex;
  align-items: center;
  position: fixed;
  top:88px;
  width: 100%;
  z-index: 100;
  box-shadow: 0 8px 5px -5px rgba(0, 0, 0, .1);
}
.content{
  width: 100%;
  height: calc(100vh - 100px);
  position: relative;
  margin-top: 100px;
}
.item{
  display: flex;
  justify-content: center;
  align-items: center;
  margin:5px auto;
}
.btn{
  margin:20px;
  border-radius: 3px;
  width:60px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2);
  background-color: rgb(68, 68, 170);
  outline: none;
  border: none;
  text-align: center;
  color:#eee;
  font-size: 14px;
}
</style>
